4.1 - Dragon Slayer!

What you'll be building

Now that you know how to use whileloops, we'll combine them with some othercontrol flow statements (like if/else) to create a dragon slaying mini game.

In this game, you’ll battle a dragon. It will take 4 hits to slay the dragon, and if you miss even one hit, the dragon will defeat you!

var slaying = true;
// A bit of new math magic to calculate the odds
// of hitting the dragon. We'll cover this soon!
var youHit = Math.floor(Math.random() * 2);
var damageThisRound = Math.floor(Math.random() * 5 + 1);
var totalDamage = 0;
while (slaying) {
  if (youHit) {
    console.log("You hit the dragon and did " + damageThisRound + " damage!");
    totalDamage += damageThisRound;
    
    if (totalDamage >= 4) {
      console.log("You did it! You slew the dragon!");
      slaying = false;
    } else {
      youHit = Math.floor(Math.random() * 2);
    }
  } else {
    console.log("The dragon burninates you! You're toast.");
    slaying = false;
  }
}
Declare your variables

All right! Let's start by declaring the variables we'll be using. We'll need:

  1. a variable to check if we're still slaying
  2. a variable to check if we hit the dragon
  3. a variable to keep track of how much damage we've dealt the dragon this round
  4. a variable to keep track of total damage

Instructions

Declare and set the following variables:

  1. slaying equal to true
  2. youHit to Math.floor(Math.random() *2). This sets youHit to a random number that's either 0 (which JavaScript reads asfalse) or 1 (which JavaScript reads astrue).
  3. damageThisRound toMath.floor(Math.random()*5 + 1). This sets damageThisRound to a random number that's between 1 and 5 (up to and including 5).
  4. totalDamage to 0

Click on "Stuck? Get a hint!" for more details on how Math.floor(Math.random()*5 + 1)works.

var slaying = true;
var youHit = Math.floor(Math.random() * 2);
var damageThisRound = Math.floor(Math.random() * 5);
var totalDamage = 0;
The 'while' loop

Awesome! Now let's add in our while loop. We want to run the whole game as long as we're trying to kill the dragon—that is, while slaying is true.

When checking variables like slaying that are set to true, you don't need to write something like:

while(slaying === true)
or
while(slaying)
It also helps to give your variables names that make the code look more like regular English. while(slaying) { /*Do this*/ }is easy to remember because it's so close to everyday speech!
The first 'if' statement

Great! Now we want to add a couple of branches to our program so it can handle different outcomes. You know what this means: if and else!

Instructions:

Inside your while loop, create anif/else statement that checks the value of youHit. If it's 1 (true), it should log a congratulatory message to the console, saying that you hit the dragon. If it's 0 (false), it should log a message to the console saying that the dragon defeated you.

Either way, slaying should be set tofalse, since either you beat the dragon (and the slaying's over) or the dragon beat you!

var slaying = true;
var youHit = Math.floor(Math.random() * 2);
var damageThisRound = Math.floor(Math.random() * 5);
var totalDamage = 0;
while(slaying){
    if(youHit == 1){
        console.log("Congrats! You hit the Dragon");
    }
    else
    {
        console.log("The Dragon kicked your ass!");
    }
    slaying = false;
}
The second 'if' statement

Good work! We're almost there.

In the first branch of our if statement (right after the console.log() where we congratulate the player for hitting the dragon), let's set totalDamage equal tototalDamage + damageThisRound. There's a shortcut for this: the += operator! When you type

totalDamage += damageThisRound;
you're telling JavaScript to addtotalDamage and damageThisRoundtogether, then assign that new value tototalDamage.
var slaying = true;
var youHit = Math.floor(Math.random() * 2);
var damageThisRound = Math.floor(Math.random() * 5);
var totalDamage = totalDamage + damageThisRound;
while(slaying){
    if(youHit == 1){
        console.log("Congrats! You hit the Dragon");
        if(totalDamage >= 4){
            console.log("The Dragon has been slayed");
            slaying = false;
        }
    }
    else
    {
        console.log("The Dragon kicked your ass!");
    }
    slaying = false;
}
Well done!

You did it! You've written your own dragon-slaying game.

Feel free to look back at the first exercise for ideas on how you can customize yourconsole.log() messages to the player. You can also invent your own!

Also try changing the values of some of the variables to see how it affects the player's odds of winning!